// vue的插件机制 install()
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'

import {useIntersectionObserver} from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue'

export default {
    install(app:App){
        // app.component('XtxSkeleton',XtxSkeleton)
        app.component(XtxSkeleton.name,XtxSkeleton)
        app.component(XtxCarousel.name,XtxCarousel)
        app.component(XtxMore.name,XtxMore)
        app.component(XtxBread.name,XtxBread)
        app.component(XtxBreadItem.name,XtxBreadItem)
        app.component(XtxCity.name,XtxCity)
        app.component(XtxNumbox.name,XtxNumbox)
        app.component(XtxButton.name,XtxButton)
        app.component(XtxCheckbox.name,XtxCheckbox)
        app.component(XtxMessage.name,XtxMessage)

        // 自定义图片懒加载指令
        // img v-lazy="地址"
        app.directive('lazy',{
            // inserted(){}  vu2的写法
            // mounted(){}   vu3的写法
            mounted(el,binding){
                const {stop} = useIntersectionObserver(el,([{isIntersecting}])=>{
                    if(isIntersecting){
                        el.src = binding.value

                        // 如果图片加载失败 给默认图片
                        el.onerror = function(){
                            el.src = defaultImg
                        }
                        stop()  //停止监听
                    }
                })
            }
        })

    }
}